@extends('Admin.base')
@section('style')

@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="LAY-table" lay-filter="LAY-table"></table>
            <script type="text/html" id="table-toolbar">
                <a href="{{url('admin/bannerIndex')}}/@{{ d.id }}/edit" class="layui-btn layui-btn-green layui-btn-xs">
                    编辑
                </a>
            </script>
            <script type="text/html" id="photoTpl">
                <a href="@{{ d.photo }}" target="_blank">
                    <img style="display: inline-block; max-width:200px; " src="@{{ d.photo }}" alt="">
                </a>
            </script>
        </div>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['form', 'table'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table;
            table.render({
                elem: '#LAY-table'
                ,url: "{{route('bannerIndex.table')}}"
                ,method: "post"
                ,page: false
                ,cols: [[
                    {field: 'photo', title: '图片', align:'center', toolbar:'#photoTpl'}
                    ,{field: 'jump_url', title: '跳转地址'}
                    ,{field: 'sort', title: '排序', align:'center', edit:'text'}
                    ,{field: 'status', title: '状态', align:'center',templet: function(d){
                            var checked = '',html = '';
                            if(d.status == '{{\App\Models\Banner::statusTrue}}'){
                                checked = 'checked';
                            }
                            html = '<input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="1" ' + checked + '  lay-filter="status" data-id="'+d.id+'">';
                            return html;
                        }}
                    ,{field: 'updated_at', title: '更新时间', align:'center'}
                    ,{title: '操作', width:80, align: 'right', toolbar: '#table-toolbar'}
                ]]
            });
            /* 表格编辑JS处理 */
            table.on('edit(LAY-table)', function(obj){
                $.ajax({
                    url: "{{url('/admin/bannerIndex/updateField')}}/"+obj.data.id
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {field:obj.field,value:obj.value,_method:'PUT'}
                    , beforeSend: function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            //执行重载
                            table.reload('LAY-table');
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });

            form.on('switch(status)', function(data){
                $.ajax({
                    url: "{{route('bannerIndex.status')}}"
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {id:$(data.elem).data('id')}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon:1});
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                });
            });
        });
    </script>

@endsection